<!DOCTYPE html>
<html>
  <head>
	<title>兼职列表</title>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">


	<link rel="stylesheet" href="__STATIC__/mobile/css/weui.min.css">
	<link rel="stylesheet" href="__STATIC__/mobile/css/jquery-weui.css">
	<link rel="stylesheet" href="__STATIC__/mobile/css/style.min.css">
	<link rel="stylesheet" href="__STATIC__/mobile/css/demos.css">
	<link rel="stylesheet" href="__STATIC__/mobile/css/main.css">
	<link rel="stylesheet" href="__STATIC__/mobile/css/iconfont.css">
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DA6Bw0637vf4t96C4GRhyPBMyplqG6zA"></script>
	<style>
		.navbar {
			height: 50px;
			color: #000;
			background: #ffd966;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99;
			display: -webkit-box;
			display: -ms-flexbox;
			overflow: hidden;
		}
		.navbar .nav-wrap-left {
			height: 100%;
			width: 25%;
			line-height: 50px;
		}
		.navbar .nav-wrap-left .nav-btn {
			padding-right: 0;
		}
		.navbar .nav-btn {
			padding: 0 0 0 10%;
			width: 90%;
			height: 100%;
			display: block;
			color: #fff;
			font-size: 14px;
		}
		/*a:active, a:focus, a:hover, a:visited {
			color: #bbb;
		}*/
		a, a:hover, del, ins, s, u {
			text-decoration: none;
		}
		.barbtn, a, button, em, input, textarea {
			-webkit-tap-highlight-color: rgba(255,0,0,0);
		}
		a {
			color: #222;
			text-decoration: none;
			outline: 0;
		}
		.navbar .nav-title {
			width: 50%;
			height: 100%;
			overflow: hidden;
			line-height: 50px;
			text-align: center;
			-webkit-box-flex: 1;
			-ms-flex: 1;
		}
		.navbar .nav-wrap-right {
			height: 100%;
			width: 25%;
			line-height: 50px;
			text-align: right;
		}
		.filterbar .dropdown-toggle.active {
			color: #179b16;
		}
		.icon-xuanzechengshi {
			font-size: 8px!important;
		}
		#joblist .list-item .salary span, #loadMore .list-item .salary span, #recommend-job .list-item .salary span {
			color: #179b16;
			font-size: .42rem;
		}
		.pic {
			width: 55px!important;
		}
		.pic img{
			width: 55px!important;
			height: 55px;
		}
		.filterbar .dropdown-wrapper {
			position: absolute;
			width: 100%;
			z-index: inherit;
		}
		.filterbar .nav {
			position: relative;
			z-index: inherit;
		}
		.block {
			display: block;
		}
		.none {
			display: none;
		}
		.filterbar .nav {
			display: -webkit-box;
			display: -ms-flexbox;
			background: #fff;
			border-bottom: 1px solid #e5e5e5;
			text-align: center;
			height: .86rem;
			line-height: .86rem;
			-webkit-user-select: none;
			font-size: 13px;
			text-align: center;
		}
		.main {
			padding: 0!important;
			/*margin-top: 50px; */
			z-index: 9999999;
		}
		.filterbar .category-wrapper {
			overflow: scroll;
		}
		.category-wrapper {
			max-height: 480px!important;
		}
		.activity_item {
			width: 33.33%;
			height: auto;
			overflow: hidden;
			float: left;
			text-align: center;
			font-size: 15px;
		}
		#joblist .list, #loadMore .list, #recommend-job .list {
			 padding: 0 !important; 
		}
        .weui-search-bar{margin-top:50px;}
        .weui-search-bar__label{line-height: 25px;}
	</style>
  </head>

  <body ontouchstart style="background: #fff">
	<div class="navbar">
		<div class="nav-wrap-left">
			
		</div>
		<div class="nav-title">兼职列表</div>
		<div class="nav-wrap-right">
			
		</div>
	</div>
    <div class="weui-search-bar" id="searchBar">
      <form class="weui-search-bar__form">
        <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
          <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
        </div>
        <label class="weui-search-bar__label" id="searchText">
          <i class="weui-icon-search"></i>
          <span>搜索</span>
        </label>
      </form>
      <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>
	<div class="main">

		<div class="filterbar">
			<ul class="nav">
				<li class="dropdown-toggle" data-list="#list-re">
					<span class="nav-head-name" id="re-title">岗位</span>
					<i class="iconfont icon-xuanzechengshi"></i>
				</li>
				<li class="dropdown-toggle" data-list="#list-jc">
					<span class="nav-head-name" id="jc-title">日期</span>
					<i class="iconfont icon-xuanzechengshi"></i>
				</li>
				<li class="dropdown-toggle" data-list="#list-type">
					<span class="nav-head-name" id="type-title">薪资</span>
					<i class="iconfont icon-xuanzechengshi"></i>
				</li>
			</ul>
	   
			<div class="dropdown-wrapper">
			  <ul>
				  <li class="category-wrapper" id="list-re" style="display: none">
					  <ul id="areaList" class="dropdown-list city"> 
					 		 <li><span>全部</span></li>
							<?php foreach($jobs as $k=>$val):?>
								<li data-reid="">
									<span>{$val}</span>
								</li>      
							<?php endforeach;?>                    
					  </ul>
				  </li>
				  <li class="category-wrapper" id="list-jc" style="display: none">
					  <ul id="postList" class="dropdown-list principal">
								<li data-jcid="19">
									<span>正序</span>
								</li> 
								<li data-jcid="19">
									<span>倒序</span>
								</li> 
					  </ul>
				  </li>
				  <li class="category-wrapper" id="list-type" style="display: none">
					  <ul class="dropdown-list aname">
							
								<li data-type="all" >
									<span data-worktype="1">正序</span>
								</li>
								<li data-type="all" >
									<span data-worktype="1">倒序</span>
								</li>        
					  </ul>
				  </li>
			  </ul>
			</div>


			<div id="joblist" style="min-height: 10px">
				<div class="shade" style="display: none;"></div>
				
				<ul id="job-all" class="list demos-content-padded" style="min-height: 10px">
				<?php foreach($info as $k=>$val):?>
					<li>
						<a href="{:U('parttimeDetail')}?id={$val['id']}" class="list-item clearfix">
							<div class="activity_item">
							   {$val.job_name}
							</div>
							<div class="activity_item">
								<?php echo date('Y-m-d',$val['start_day']);?>
							</div>
							<div class="activity_item">
								{$val.salary}/天
							</div>
						</a>
					</li>
				<?php endforeach;?>
				</ul>
			</div>
   
		</div>
	</div>
   
	<div id="allmap1"></div>
	<script src="__STATIC__/mobile/js/jquery-2.1.4.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script src="__STATIC__/mobile/js/jquery-weui.js"></script>
	<script src="__STATIC__/mobile/js/pull-to-refresh.js"></script>
	<script src="__STATIC__/mobile/js/globalvariable.js"></script>
	<script src="__STATIC__/mobile/js/sose.js"></script>
	<script>
	$(function(){

		//initFilter()
		listType();
		$("#searchInput").on('input',function(e){
			var txt=$("#searchInput").val();
			if($.trim(txt)!=""){
			  $("#job-all li").hide().filter(":contains('"+txt+"')").show()
			}else{
			  $("#job-all li").show();
			}
		})    
	})
	</script>
	<script>
	   var addr,
	   principal,
	   aname;
	 function listType() {
		$('.dropdown-toggle').click(function(e) {
			tid = $(this).attr("data-list")
			if ($(this).hasClass('active')) {
				$(this).removeClass("active");
				$('.dropdown-wrapper .category-wrapper').css("display","none");
				$(""+tid+"").fadeOut();
				$('.shade').fadeOut();
			} else {
				$('.dropdown-toggle').removeClass("active");
				$(this).addClass("active");
				$('.dropdown-wrapper .category-wrapper').css("display","none");
				$(""+tid+"").fadeIn();
				$('.shade').fadeIn();
			}
		});
			$(".shade").off().on('click',function(e){
				$('.shade').fadeOut();
				$(".dropdown-wrapper .category-wrapper").hide();
				$(".dropdown-toggle").removeClass("active")
			})
		$('#list-re ul li').click(function (e) {
			$('#list-re ul li').removeClass("active");
			$(this).addClass("active");
			addr = $(this).find("span").html();
			$('#re-title').html(addr);
			search(addr,principal,aname);
			$(""+tid+"").fadeOut();
			$('.shade').fadeOut();
			$('.dropdown-toggle').removeClass("active");
		})
		$('#list-jc ul li').click(function (e) {
			$('#list-jc ul li').removeClass("active");
			$(this).addClass("active");
			principal = $(this).find("span").html();
			$('#jc-title').html(principal);
			search(addr,principal,aname);
			$(""+tid+"").fadeOut();
			$('.shade').fadeOut();
			$('.dropdown-toggle').removeClass("active");
		})
		$('#list-type ul li').click(function (e) {
			$('#list-type ul li').removeClass("active");
			$(this).addClass("active");
			aname = $(this).find("span").html();
			$('#type-title').html(aname);
			search(addr,principal,aname);
			$(""+tid+"").fadeOut();
			$('.shade').fadeOut();
			$('.dropdown-toggle').removeClass("active");
		})
	  }

		  function search(addr,principal,aname){
				$.ajax({
					url : 'http://house.wechatpic.com/Mobile/Interface/get_parttime_job_search_info',
					type : 'get',
					dataType : 'json',
					data : {
						addr : addr,
						principal : principal,
						aname : aname
					},
					success:function(data){
						console.log(data)
						$("#job-all").html('');
						data.forEach(function(i){
							let actid = Number(i.j_id),
							aname = i.job_name,
							city = i.start_day,
							principal = i.salary;
							let li = `<li><a href="/Mobile/My/parttimeDetail.html?id=${actid}" class="list-item clearfix"><div class="activity_item">${aname}</div><div class="activity_item">${city}</div><div class="activity_item">${principal}</div></a></li>`;
							$("#job-all").append(li)
						})
					}
				})
		  }

		  function initFilter(){
				$.ajax({
					url : 'http://house.wechatpic.com/Mobile/Interface/get_active_search',
					type : 'get',
					data : {},
					dataType :　'json',
					success:function(data){
						console.log(data)
						for(var i in data){
							data[i].forEach(function(j){
								let li =    `<li ><span>${j}</span></li>`
								$("."+i).append(li)
							})                      
						}
						listType();
					}
				})
		  }
	</script>
  </body>
</html>
